<template>
  <div
    ref="asTooltipData"
    class="as-tooltip-data"
  >
    <el-form
      ref="form"
      :model="form"
      label-width="110px"
    >
      <VsFormItem
        :label="$demoi18n('asTooltip.label.selectKey')"
        prop="asTooltipKey"
      >
        <template #label>
          <span>
            {{ $demoi18n('panel.label.component.selectKey') }}
            <Helptip>{{ $demoi18n('panel.label.component.helptip') }}</Helptip>
          </span>
        </template>
        <ValueInputer
          v-model:value="form.asTooltipKey"
          value-type="List"
          :enum-values="asTooltipKeys"
        />
      </VsFormItem>

      <VsFormItem
        v-if="form.asTooltipKey"
        prop="correlation"
      >
        <el-radio-group
          v-model="form.correlation"
          size="default"
        >
          <el-radio label="correlate">{{ $demoi18n('panel.tootipData.dataCorrelate') }}</el-radio>
          <el-radio label="discorrelate">{{ $demoi18n('panel.tootipData.dataDiscorrelate') }}</el-radio>
        </el-radio-group>
      </VsFormItem>

      <!-- 选中数据关联展示 -->
      <div v-if="form.correlation === 'correlate' && form.asTooltipKey">
        <el-table
          class="config-panel-table mapping-table"
          :data="form.correlatedData"
          :row-style="{ height: '25px' }"
          :header-row-style="{ height: '25px' }"
          :header-cell-style="{ lineHeight: '15px' }"
        >
          <el-table-column
            :render-header="renderTableHeader"
            prop="priKey"
            :label="$demoi18n('panel.tooltipData.compField')"
            width="180"
          >
            <template #default="scope">
              <span class="mapping-scope">
                *
              </span>
              <VsFormItem :prop="`correlatedData[${scope.$index}].priKey`">
                <el-select
                  v-model="scope.row.priKey"
                  clearable
                  filterable
                  allow-create
                  default-first-option
                  size="default"
                  :class="'panel-data-select-' + xvueTheme"
                  :popper-class="'select-poper-' + xvueTheme"
                >
                  <el-option
                    v-for="(n, i) in mainVars"
                    :key="i"
                    :label="`${i}`"
                    :value="i"
                  ></el-option>
                </el-select>
              </VsFormItem>
            </template>
          </el-table-column>
          <el-table-column
            :render-header="renderTableHeader"
            prop="priMapKey"
            :label="$demoi18n('panel.tooltipData.apiCorrelateField')"
            width="180"
          >
            <template #default="scope">
              <span class="mapping-scope">
                *
              </span>
              <VsFormItem :prop="`correlatedData[${scope.$index}].priKey`">
                <el-select
                  v-model="scope.row.priMapKey"
                  clearable
                  size="default"
                  :class="'panel-data-select-' + xvueTheme"
                  :popper-class="'select-poper-' + xvueTheme"
                >
                  <el-option
                    v-for="(item, index) in mappingOptions"
                    :key="index"
                    :label="item.field"
                    :value="item.field"
                  ></el-option>
                </el-select>
              </VsFormItem>
            </template>
          </el-table-column>
          <el-table-column width="40">
            <template #default="scope">
              <el-button
                icon="Delete"
                :link="true"
                type="primary"
                :disabled="form.correlatedData.length === 1"
                @click.stop="deleteCurRow(scope)"
              ></el-button>
            </template>
          </el-table-column>
        </el-table>
        <el-button
          class="btn-sure"
          size="default"
          icon="CirclePlus"
          @click.stop="addNewRow()"
        >
          {{ $demoi18n('btn.add') }}
        </el-button>
      </div>
    </el-form>
    <div class="bottom-btns">
      <el-button
        class="button-cancel"
        size="default"
        @click="cancel"
      >
        {{ $demoi18n('btn.cancel') }}
      </el-button>
      <el-button
        class="btn-sure"
        type="primary"
        size="default"
        @click="save"
      >
        {{ $demoi18n('btn.save') }}
      </el-button>
    </div>
  </div>
</template>
<script lang="jsx">
import { mapState, mapMutations } from 'vuex';
import ValueInputer from '@/components/common/value-inputer/value-inputer.vue';
import Helptip from '@/components/common/helptip/helptip.vue';

const defaultForm = {
  asTooltipKey: '',
  correlation: 'correlate', // 数据关联情况
  correlatedData: [
    {
      priKey: '',
      priMapKey: '',
    },
  ],
};
export default {
  components: { ValueInputer, Helptip },
  props: {
    mainVars: {

      // 主表变量
      type: Object,
      default: () => ({}),
    },
    asItem: {
      type: Object,
      default: () => {
        const conf = JSON.parse(JSON.stringify(defaultForm));
        return conf;
      },
    },
  },
  emits: ['save', 'cancel'],
  data() {
    return {
      xvueTheme: window._adoPremise.uc.theme,
      form: JSON.parse(JSON.stringify(defaultForm)),
    };
  },
  computed: {
    ...mapState({
      asTooltips: state => state.VisualComponentsModule.asTooltips,
    }),
    asTooltipKeys() {
      const asTooltips = this.asTooltips.filter(n => n.pageId === window.visualComp.pageId);
      let keys = asTooltips.map(n => n.asTooltipKey);
      keys = Array.from(new Set(keys));
      keys = keys.map(n => ({
        label: n,
        value: n,
      }));
      return keys;
    },
    mappingOptions() {
      const tipItem = this.asTooltips.find(n => n.asTooltipKey === this.form.asTooltipKey);
      return (tipItem && tipItem.tableData) || [];
    },
  },
  watch: {},
  created() {
    this.iniAsItem();
  },
  methods: {
    save() {
      this.$refs.form.validate(valid => {
        if (valid) {
          const flag = this.checkCorrelatedData();
          if (flag) {
            this.$emit('save', this.form);
            return true;
          } else {
            this.$message({
              message: this.$demoi18n('message.dataAssociationFieldEmpty'),
              type: 'warning',
            });
            return false;
          }
        } else {
          return false;
        }
      });
    },
    cancel() {
      this.$emit('cancel', this.form);
    },

    // 关联数据增加新行
    addNewRow() {
      this.form.correlatedData.push({
        priKey: '',
        priMapKey: '',
      });
    },

    // 关联数据删除选中行
    deleteCurRow(scope) {
      this.form.correlatedData.splice(scope.$index, 1);
    },
    checkCorrelatedData() {
      let flag = true;
      if (!this.form.correlatedData.length) {
        flag = false;
      }
      this.form.correlatedData.forEach(item => {
        if (!item.priKey || !item.priMapKey) {
          flag = false;
        }
      });
      if (this.form.correlation === 'discorrelate') {
        flag = true;
      }
      return flag;
    },
    iniAsItem() {
      const keys = Object.keys(this.asItem);
      if (keys.length > 0) {
        this.form = JSON.parse(JSON.stringify(this.asItem));
      }
    },
    renderTableHeader({ column }) {
      return (<el-tooltip placement="top" content={column.label} effect={this.xvueTheme}>
        <span>{column.label}</span>
      </el-tooltip>
      );
    },
  },
};
</script>
<style lang="less" scoped>
.as-tooltip-data {
  width: 400px;
  :deep(.el-form-item) {
    margin-bottom: 0px;

    .el-form-item__error {
      top: 100%;
      padding-top: 0;
    }
  }
  .is-error {
    margin-bottom: 15px;
  }
  .mapping-scope {
    color: #f56c6c;
    position: absolute;
    left: 0px;
    top: 15%;
  }

  :deep(.config-panel-table) {
    .el-form-item__content {
      margin-left: 0 !important;
    }
    td {
      padding: 2px;
    }
    .cell {
      overflow: hidden;
      text-overflow: ellipsis;
      white-space: nowrap;
    }
  }
  .bottom-btns {
    display: flex;
    justify-content: center;
    margin-top: 20px;
  }
}
</style>

<style lang="less">
.panel-data-select-dark {
  :deep(.el-input) {
    .el-input__inner {
      border-color: #588ba8;
      color: #fff;
      background-color: #091a2d;
    }
    .el-input__icon {
      color: #588ba8;
    }
  }
}

.select-poper-dark {
  background-color: #091a2d;
  border-color: #588ba8;

  :deep(.el-scrollbar) {
    .el-select-dropdown__list {
      .el-select-dropdown__item {
        padding: 0 12px;
        height: 24px;
        line-height: 24px;
        font-size: 12px;
        color: #fff;
        background-color: #091a2d;

        .select-icon {
          padding: 0;
        }

        .select-option-slot-text {
          display: inline-block;
          white-space: nowrap;
          overflow: hidden;
          text-overflow: ellipsis;
          color: #178ddf;
        }
        .select-option-slot-icon {
          display: inline-block;
          vertical-align: top;
        }
      }
      .hover {
        background-color: #102e4f;
      }
    }
  }
  :deep(.popper__arrow) {
    border-bottom-color: #588ba8;
    &::after {
      border-bottom-color: #091a2d !important;
    }
  }
}

.select-poper-light {
  :deep(.el-scrollbar) {
    .el-select-dropdown__list {
      .el-select-dropdown__item {
        padding: 0 12px;
        height: 24px;
        line-height: 24px;
        font-size: 12px;
        .select-icon {
          padding: 0;
        }

        .select-option-slot-text {
          display: inline-block;

          white-space: nowrap;
          overflow: hidden;
          text-overflow: ellipsis;
        }
        .select-option-slot-icon {
          display: inline-block;
          vertical-align: top;
        }
      }
    }
  }
}

.visualComponents_theme_dark {
  .tooltip-data {
    .el-table {
      th,
      td {
        background-color: #122b40;
        border-color: transparent;
      }
    }
    .el-table--border::after,
    .el-table--group::after,
    .el-table::before {
      background-color: transparent;
    }
    .el-table--border,
    .el-table--group {
      border-color: #1a3f60 !important;
    }
    .el-table--enable-row-hover {
      .el-table__body {
        tr:hover > td {
          background-color: #255074;
        }
      }
    }
  }
}
</style>
